import { Checkbox, Input, Row, Select, Tooltip } from 'antd';
import React from 'react';
import PathInput from '@/components/PathInput';
import { OPERATORS } from '../Transformer/settings';

function SimpleCondition({ value, onChange, style }) {
  const {
    lhsPath,
    op,
    rhs: { stringValue, isString },
  } = value;

  const onPathChange = path => {
    onChange({ ...value, lhsPath: path });
  };

  const onOpChange = op => {
    onChange({ ...value, op });
  };

  const onValueChange = stringValue => {
    onChange({
      ...value,
      rhs: {
        ...value.rhs,
        stringValue,
      },
    });
  };

  const onIsStringChange = isString => {
    console.log({
      ...value,
      rhs: {
        ...value.rhs,
        isString,
      },
    });
    onChange({
      ...value,
      rhs: {
        ...value.rhs,
        isString,
      },
    });
  };

  return (
    <Row type="flex" align="middle" style={{ ...style }}>
      <PathInput
        value={lhsPath}
        onChange={onPathChange}
        style={{ width: 'calc(100% - 120px - 80px - 8px)', marginRight: '4px' }}
      />
      <Select value={op} style={{ width: '80px', marginRight: '4px' }} onChange={onOpChange}>
        {OPERATORS.map(k => (
          <Select.Option key={k.value} value={k.value} title={k.title}>
            {k.title}
          </Select.Option>
        ))}
      </Select>
      <Input
        value={stringValue}
        style={{ width: '120px', marginTop: -1 }}
        onChange={e => onValueChange(e.target.value)}
        placeholder="值"
        allowClear
        addonAfter={
          <Tooltip title="是否当成字符串处理">
            <Checkbox checked={isString} onChange={e => onIsStringChange(e.target.checked)} />
          </Tooltip>
        }
      />
    </Row>
  );
}

export default SimpleCondition;
